<script setup lang="ts">
  import { ref } from 'vue';

  const emit = defineEmits(['on-search']);

  const props = defineProps({
    keyword: String,
    placeholder: String,
  });

  const inputEl = ref<HTMLInputElement | null>(null);

  const onSearchFocus = (e: Event) => {
    const tar = e.target;

    if (!(tar instanceof HTMLInputElement)) return;
    emit('on-search', tar.value);
  }

  const onSearchInputClick = () => {
    if (!inputEl.value) return;
    inputEl.value.focus();
  }

</script>

<template>
  <div @click="onSearchInputClick" class="search-input">
		<div class="input-wrapper">
			<i class="iconfont icon-header-search" />
			<input
        ref="inputEl"
        type="text"
        class="input"
        :value="props.keyword"
        :placeholder="props.placeholder"
        @input="onSearchFocus"
      />
		</div>
	</div>
</template>

<style lang="scss" scoped>
  @import "./index.scss";
</style>
